<style>
	ul {
		padding:0;
		margin:0;
		display:inline;
	}

	#name {
		font-size:30px;
		padding:5px;
	}
    .context {
        display: inline;
        padding: 5px 10px;
		list-style: none;
		background-color: #aaa;
    }

	.context a {
		text-decoration: none;
		color: white;
	}
	.context.current {
		font-weight: bold;
		background-color: #ccc;
	}
	.context.current a {
		color: black;
	}

	.current.task {
		margin-top:10px;
		font-size:40px;
		padding:10px;
		font-weight:bold;
	}
	
	.complete, .title, .move {
		display:inline;
	}
	
	
</style>

<form method='POST' action='/'>
    <input type='text' id='name' name='name' placeholder='Create New Task'/>
    <input type='hidden' name='context' value='{{ context.id }}'/>
</form>

<ul class='contexts'>
{% for c in contexts %}
<li class='context{% if c.title == context.title %} current{% endif %}'>
    <a href='/?context={{ c.id }}'>{{ c.title }}</a>
</li>
{% endfor %}


<div class='current task'>
	{% if task %}
    	{{ task.title }}
	{% else %}
    	NOTHING TO DO!
	{% endif %}
</div>

{% if task %}
	<div class='complete'>
    	<a href='/complete?task={{ task.id }}&context={{ context.id }}'>Complete Task</a>
	</div>

	<div class='title'>or move to:</div>
	<ul>
	<li class='move'>
    	<a target='_blank'
       		href='http://www.google.com/calendar/event?action=TEMPLATE&text={{ task.title }}&details={{ task.id }}'>Calendar</a>
	</li>
	{% for c in contexts %}
	<li class='move'>
    	<a href='/move?task={{ task.id }}&context={{ context.id }}&destination_context={{ c.id }}'>{{ c.title }}</a>
	</li>
	{% endfor %}
	</ul>
{% endif %}

<script>
    /* mousetrap v1.2.2 craig.is/killing/mice */
    (function(){function q(a,c,b){a.addEventListener?a.addEventListener(c,b,!1):a.attachEvent("on"+c,b)}function x(a){return"keypress"==a.type?String.fromCharCode(a.which):h[a.which]?h[a.which]:y[a.which]?y[a.which]:String.fromCharCode(a.which).toLowerCase()}function r(a,c){var a=a||{},b=!1,d;for(d in l)a[d]&&l[d]>c?b=!0:l[d]=0;b||(n=!1)}function z(a,c,b,d,F){var g,e,f=[],j=b.type;if(!k[a])return[];"keyup"==j&&s(a)&&(c=[a]);for(g=0;g<k[a].length;++g)if(e=k[a][g],!(e.seq&&l[e.seq]!=e.level)&&j==e.action&&
            ("keypress"==j&&!b.metaKey&&!b.ctrlKey||c.sort().join(",")===e.modifiers.sort().join(",")))d&&e.combo==F&&k[a].splice(g,1),f.push(e);return f}function t(a,c,b){if(!u.stopCallback(c,c.target||c.srcElement,b)&&!1===a(c,b))c.preventDefault&&c.preventDefault(),c.stopPropagation&&c.stopPropagation(),c.returnValue=!1,c.cancelBubble=!0}function v(a){"number"!==typeof a.which&&(a.which=a.keyCode);var c=x(a);if(c)if("keyup"==a.type&&w==c)w=!1;else{var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");
        a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");var b=z(c,b,a),d,f={},g=0,e=!1;for(d=0;d<b.length;++d)b[d].seq?(e=!0,g=Math.max(g,b[d].level),f[b[d].seq]=1,t(b[d].callback,a,b[d].combo)):!e&&!n&&t(b[d].callback,a,b[d].combo);a.type==n&&!s(c)&&r(f,g)}}function s(a){return"shift"==a||"ctrl"==a||"alt"==a||"meta"==a}function A(a,c,b){if(!b){if(!p){p={};for(var d in h)95<d&&112>d||h.hasOwnProperty(d)&&(p[h[d]]=d)}b=p[a]?"keydown":"keypress"}"keypress"==b&&c.length&&(b="keydown");return b}function B(a,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               c,b,d,f){var a=a.replace(/\s+/g," "),g=a.split(" "),e,h,j=[];if(1<g.length){var i=a,m=b;l[i]=0;m||(m=A(g[0],[]));a=function(){n=m;++l[i];clearTimeout(C);C=setTimeout(r,1E3)};b=function(a){t(c,a,i);"keyup"!==m&&(w=x(a));setTimeout(r,10)};for(d=0;d<g.length;++d)B(g[d],d<g.length-1?a:b,m,i,d)}else{h="+"===a?["+"]:a.split("+");for(g=0;g<h.length;++g)e=h[g],D[e]&&(e=D[e]),b&&("keypress"!=b&&E[e])&&(e=E[e],j.push("shift")),s(e)&&j.push(e);b=A(e,j,b);k[e]||(k[e]=[]);z(e,j,{type:b},!d,a);k[e][d?"unshift":
            "push"]({callback:c,modifiers:j,action:b,seq:d,level:f,combo:a})}}for(var h={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",18:"alt",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},y={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},E={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7",
        "*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},D={option:"alt",command:"meta","return":"enter",escape:"esc"},p,k={},i={},l={},C,w=!1,n=!1,f=1;20>f;++f)h[111+f]="f"+f;for(f=0;9>=f;++f)h[f+96]=f;q(document,"keypress",v);q(document,"keydown",v);q(document,"keyup",v);var u={bind:function(a,c,b){for(var d=a instanceof Array?a:[a],f=0;f<d.length;++f)B(d[f],c,b);i[a+":"+b]=c;return this},unbind:function(a,c){i[a+":"+c]&&(delete i[a+":"+c],this.bind(a,function(){},
            c));return this},trigger:function(a,c){i[a+":"+c]();return this},reset:function(){k={};i={};return this},stopCallback:function(a,c){return-1<(" "+c.className+" ").indexOf(" mousetrap ")?!1:"INPUT"==c.tagName||"SELECT"==c.tagName||"TEXTAREA"==c.tagName||c.contentEditable&&"true"==c.contentEditable}};window.Mousetrap=u;"function"===typeof define&&define.amd&&define(u)})();
</script>

<script>
//    document.getElementById('name').focus();
    {% if task %}
        Mousetrap.bind('c', function() { window.location = '/complete?task={{ task.id }}&context={{ context.id }}' });
    {% endif %}
</script>
